import {useParams} from 'umi';
import { Anchor, Typography } from 'antd';

import styles from './structure.less';
import {
    GetKnowledgeDetailsRequest,
} from "@/pages/Dashboard/Knowledge/service";
import {useEffect, useState} from "react";
import {history} from "@@/core/history";

const { Link } = Anchor;
const { Text } = Typography;
export default ({ editable }: { editable: boolean }) => {
    const {
        id,
    }: {
        id:string;//路由上的知识ID
    } = useParams();
    const { query = {}} = history.location;
    const [ chapterItems,setChapterItems] = useState<AircasKB.Knowledge.SectionItem[]>([]);
    const [ data,setData ] = useState<AircasKB.Knowledge.GetKnowledgeDetailsResponse>();
    //根据知识id查询章节列表
    const getKnowledgeChapterToKid = (data:AircasKB.Knowledge.KnowledgeChapterView[]) => {
        if(data && data.length>0){
            const result:AircasKB.Knowledge.SectionItem[] = [];
            data.map((item)=>{
                result.push({
                    id:item.id,
                    title:item.title,
                    type:item.type,
                    chapterNo:item.chapterNo,
                })
            })
            setChapterItems(result);
        }
    }

    //根据知识ID获取知识详情
    //todo: GetKnowledgeDetails
    const GetKnowledgeDetails = async (id:string) => {
        try {
            const res:AircasKB.ResponseType<AircasKB.Knowledge.GetKnowledgeDetailsResponse> = await GetKnowledgeDetailsRequest({
                knowledgeId:id
            })
            if(res.code == 200){
                setData(res.data);
                if(res.data.chapterList){
                    getKnowledgeChapterToKid(res.data.chapterList);
                }

            }
        }
        catch (e) {
        }
    }

    useEffect(()=>{
        if(id){
            GetKnowledgeDetails(id);
        }
    },[id,query])

    return (
        <div className={styles.wrapper}>
            <Anchor className={styles.right} bounds={80} showInkInFixed={true}>
                <Link href="#title" title={<Text strong>知识概览</Text>}>
                    { data && data.baseInfo &&  <Link href="#basic" title="基本信息" />}

                    {/*<Link href="#intellectualProperty" title="👋 知识产权" />*/}
                </Link>
                <Link href="#section" title={<Text strong>知识结构</Text>}>
                    {(chapterItems ?? []).map((item) => {
                        return (
                            <Link
                                key={item.id}
                                href={`#section-${item.id}`}
                                title={`${item.chapterNo}. ${item.title}`}
                            />
                        );
                    })}
                </Link>
                <Link href="#additional" title={<Text strong>附加内容</Text>}>
                    { data && data.associativeList && data.associativeList?.length>0 && <Link href="#relevance" title="关联知识" />}
                    { data && data.attachmentList && data.attachmentList?.length>0 && <Link href="#attachment" title="附件下载" />}
                    { data && data.referenceList && data.referenceList.length>0 &&<Link href="#quote" title="参考引用" />}
                </Link>
            </Anchor>
        </div>
    );
};
